import React, {useEffect} from 'react';
import {Form, Select, TreeSelect} from 'antd';

import ProBox from "vendor/components/pro-box";
import {WrappedComponentProps} from "vendor/components/pro-hoc/withModal";

import { EnumRoleDataScopeTypeList, EnumRoleDataScopeType } from '../../constants';
import { useDataAuth } from './useDataAuth';

interface DataAuthProps extends WrappedComponentProps{
    roleId: number;
    fetchList: () => void;
}

const DataAuth: React.FC<DataAuthProps> = ({ modalControl,roleId, fetchList }) => {
    const [ form ] = Form.useForm();
    const {loading, deptTree, selectedDataScope, setSelectedDataScope, selectedDeptIds, updateDataScope} = useDataAuth(roleId)

    useEffect(() => {
        modalControl.registerOk(handleSubmit);
    });

    const handleSubmit = () => {
        form.validateFields().then((values) => {
            updateDataScope(values, () => {
                fetchList();
                modalControl.close()
            }, () => modalControl.hideSaving())
        }).catch(() => modalControl.hideSaving())
    }

    return <ProBox loading={loading}>
        <Form form={form} initialValues={{dataScope: selectedDataScope, deptIds: selectedDeptIds}}>
            <Form.Item
                label="权限范围"
                name="dataScope"
            >
                <Select onChange={(value) => setSelectedDataScope(value as string)}>
                    {EnumRoleDataScopeTypeList.map(({label, value}) => (
                        <Select.Option key={value} value={value}>{label}</Select.Option>
                    ))}
                </Select>
            </Form.Item>

            {EnumRoleDataScopeType.custom == selectedDataScope && <Form.Item
                label="组织结构"
                name="deptIds"
            >
                <TreeSelect treeData={deptTree} treeCheckable={true} />
            </Form.Item>}
        </Form>
    </ProBox>
}

export default DataAuth


//
// interface TreeFormItemProps{
//     treeData: any,
//     value?: (number | string)[];
//     onChange?: (keys: (number | string)[]) => void;
// }
//
// const TreeFormItem: React.FC<TreeFormItemProps> = ({value, onChange, treeData}) => {
//
//
//     return <Tree
//         checkable
//         checkStrictly
//         checkedKeys={value}
//         onCheck={(e, d) => {
//             console.log("e->",e);
//             const keys = e.checked;
//             // const parentKeys = d.node.parentKey;
//             // if (d.checked) {
//             //     existOrPush(keys, parentKeys);
//             // }
//             // if (d.node.children && d.node.children.length > 0) {
//             //
//             //     const childrenKeys = recursion(d.node.children);
//             //
//             //     if (d.checked) {
//             //         existOrPush(keys, childrenKeys);
//             //     } else {
//             //         unExistOrPop(keys, childrenKeys)
//             //     }
//             // }
//             onChange(keys)
//         }}
//         treeData={treeData}
//     />
// }
//
